<template>
  <div>
    <van-popup
      :show="modelValue"
      position="bottom"
      round
      :style="{ height: '50%' }"
      @close="onClose"
    >
      <template #default>
        <div class="head">
          <div class="title">选择支付方式</div>
          <div class="price">￥ {{actualPayment}}.00</div>
        </div>
        <van-radio-group v-model="checked">
          <van-cell-group>
            <van-cell clickable @click="checked = '0'">
              <template #title>
                <img class="icon" src="@/assets/upload/wechat@2x.png" alt="">
                <span class="custom-title">微信支付</span>
              </template>
              <template #right-icon>
                <van-radio name="0" checked-color="#16c2a3" icon-size="0.44rem" />
              </template>
            </van-cell>
            <van-cell clickable @click="checked = '1'">
              <template #title>
                <img class="icon" src="@/assets/upload/Alipay@2x.png" alt="">
                <span class="custom-title">支付宝支付</span>
              </template>
              <template #right-icon>
                <van-radio name="1" checked-color="#16c2a3" icon-size="0.44rem" />
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div class="footer">
            <van-button color="#16c2a3" block round @click="onPayment">
                立即支付
            </van-button>
        </div>
      </template>
    </van-popup>
  </div>
</template>

<script setup>
import { defineProps, ref, defineEmits } from 'vue'
import { showToast, showLoadingToast, showConfirmDialog } from 'vant'
import { orderPay } from '@/api'
import { useRouter } from 'vue-router'
import store from '@/store'

const router = useRouter()

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  orderId: String,
  isOrderDetail: {
    type: String,
    default: '0'
  },
  payCallback: String,
  actualPayment: Number
})

const emits = defineEmits(['update:modelValue'])

const checked = ref('')

// 立即支付
const onPayment = async () => {
  if (!checked.value) {
    showToast('请选择支付方式')
    return
  }
  showLoadingToast({
    message: '跳转支付',
    forbidClick: true
  })
  console.log('props.orderId', props.orderId)
  const res = await orderPay({
    orderId: props.orderId,
    paymentMethod: checked.value,
    payCallback: props.payCallback
  })
  if (res.code === 400) {
    showToast(res.message)
    return
  }
  router.push({ path: res.data.payUrl })
}

// 关闭弹出层
const onClose = () => {
  if (props.isOrderDetail === '1') {
    emits('update:modelValue', false)
    checked.value = ''
    return
  }
  showConfirmDialog({
    title: '关闭支付',
    message:
    '取消支付将无法获得医生回复，医生接诊名额有限，是否确认关闭?',
    confirmButtonText: '继续支付',
    confirmButtonColor: '#16c2a3',
    cancelButtonText: '仍要关闭'
  })
    .then(() => {
    // on confirm
      emits('update:modelValue', true)
    })
    .catch(() => {
    // on cancel
      router.push('/consult')
      store.commit('illness/setIllnessInfo', {
        message: '', // 病情描述
        illnessTime: '', // 患病时间
        seeDoctor: '' // 是否就诊过
      })
    })
}
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    margin: 20px 0;
    font-size: 32px;
  }
  .price {
    margin: 40px 0;
    font-size: 32px;
    font-weight: 700;
  }
}
.van-cell{
    line-height: 2.2;
}
.icon{
    margin-right: 20px;
    width: 34px;
    height: 34px;
    vertical-align: middle;
}
.footer{
    padding: 30px;
}
</style>
